<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>龙舟 - 中华非遗</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <style>
      /**
         * 龙舟页面专属样式
         */
      .longzhou-hero {
        background: linear-gradient(135deg, #1976d2 0%, #004ba0 100%);
        color: white;
        padding: 120px 0 80px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .longzhou-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("img/龙舟.jpg") center/cover;
        opacity: 0.2;
        z-index: 1;
      }

      .longzhou-hero .container {
        position: relative;
        z-index: 2;
      }

      .longzhou-hero h1 {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .longzhou-hero p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
      }

      .breadcrumb {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 2rem;
      }

      .breadcrumb a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .breadcrumb a:hover {
        color: white;
      }

      .breadcrumb i {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.8rem;
      }

      /* 非遗科普模块样式 */
      .heritage-science-section {
        padding: 80px 0;
        background: #fafafa;
      }

      .heritage-science-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }

      .science-text {
        background: white;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        position: relative;
      }

      .science-text::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(to bottom, #1976d2, #004ba0);
        border-radius: 5px 0 0 5px;
      }

      .science-text h2 {
        color: #1976d2;
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
        font-weight: 700;
      }

      .science-text h3 {
        color: #333;
        font-size: 1.5rem;
        margin: 2rem 0 1rem;
        position: relative;
        padding-left: 20px;
      }

      .science-text h3::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: #1976d2;
        border-radius: 50%;
      }

      .science-text p {
        line-height: 1.8;
        color: #555;
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
      }

      .science-text ul {
        list-style: none;
        padding-left: 0;
      }

      .science-text li {
        padding: 8px 0 8px 30px;
        position: relative;
        color: #666;
        line-height: 1.6;
      }

      .science-text li::before {
        content: "▸";
        position: absolute;
        left: 0;
        color: #1976d2;
        font-weight: bold;
      }

      .heritage-info {
        background: linear-gradient(135deg, #f8f9ff, #e3f2fd);
        border-radius: 15px;
        padding: 25px;
        margin: 20px 0;
        border-left: 4px solid #1976d2;
      }

      .heritage-info p {
        margin-bottom: 8px;
        font-size: 1rem;
      }

      .heritage-info strong {
        color: #1976d2;
        font-weight: 600;
      }

      .science-images {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .science-image {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
      }

      .science-image:hover {
        transform: translateY(-5px);
      }

      .science-image img {
        width: 100%;
        height: auto;
        display: block;
      }

      .image-caption {
        background: white;
        padding: 15px 20px;
        font-size: 0.9rem;
        color: #666;
        text-align: center;
      }

      /* 科学课堂模块样式 */
      .science-classroom-section {
        padding: 80px 0;
        background: white;
      }

      .classroom-content {
        max-width: 900px;
        margin: 0 auto;
      }

      .classroom-header {
        text-align: center;
        margin-bottom: 60px;
      }

      .classroom-header h2 {
        color: #1976d2;
        font-size: 2.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
      }

      .classroom-header p {
        font-size: 1.2rem;
        color: #666;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
      }

      .classroom-topic {
        background: #f8f9ff;
        border-radius: 20px;
        padding: 40px;
        margin-bottom: 40px;
        border-left: 5px solid #1976d2;
        position: relative;
      }

      .classroom-topic::before {
        content: "";
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #1976d2, #004ba0);
        border-radius: 50%;
        opacity: 0.1;
      }

      .topic-title {
        color: #1976d2;
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .topic-title i {
        background: linear-gradient(135deg, #1976d2, #004ba0);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
      }

      .topic-content {
        color: #444;
        line-height: 1.8;
        font-size: 1.1rem;
      }

      .topic-content p {
        margin-bottom: 1.5rem;
      }

      .highlight-box {
        background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
        border-radius: 15px;
        padding: 25px;
        margin: 20px 0;
        border-left: 4px solid #1976d2;
      }

      .highlight-box strong {
        color: #1976d2;
      }

      /* 学科核心概念样式 */
      .core-concepts-section,
      .interdisciplinary-section {
        margin-bottom: 60px;
      }

      .section-title {
        color: #1976d2;
        font-size: 2rem;
        margin-bottom: 2rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: center;
      }

      .section-title i {
        background: linear-gradient(135deg, #1976d2, #004ba0);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
      }

      /* 表格样式 */
      .concept-table-container {
        margin-top: 30px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        background: white;
      }

      .concept-table {
        width: 100%;
        border-collapse: collapse;
        font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      }

      .concept-table thead th {
        background: linear-gradient(135deg, #1976d2, #004ba0);
        color: white;
        padding: 25px 20px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }

      .concept-table thead th:last-child {
        border-right: none;
      }

      .concept-table tbody td {
        padding: 25px 20px;
        border-bottom: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        vertical-align: middle;
      }

      .concept-table tbody td:last-child {
        border-right: none;
      }

              /* 修复合并单元格时的边框问题 */
        .concept-number-cell {
            border-right: 1px solid #e0e0e0 !important;
        }

        .concept-merged-cell {
            border-right: 1px solid #e0e0e0 !important;
        }

        .merged-cell {
            border-right: 1px solid #e0e0e0 !important;
        }

      .concept-table tbody tr:last-child td {
        border-bottom: none;
      }

              .heritage-content {
            background: linear-gradient(135deg, #fafafa, #f5f5f5);
            width: 30%;
            vertical-align: top !important;
        }

      .heritage-content p {
        color: #333;
        line-height: 1.8;
        font-size: 1rem;
        margin: 0;
        text-align: justify;
      }

              .concept-number-cell {
            background: white;
            width: 22.5%;
            text-align: center;
        }

        .concept-text-cell {
            background: white;
            width: 22.5%;
        }

      .concept-text-cell p {
        color: #1976d2;
        font-size: 1.1rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.4;
        margin: 0;
        padding: 10px;
      }

      .concept-number {
        color: #1976d2;
        font-size: 1.1rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.4;
        margin: 0;
        padding: 10px;
      }

      .domain-content {
        background: linear-gradient(135deg, #f8f9ff, #e8f5e8);
        width: 25%;
        text-align: center;
      }

      .merged-cell {
        padding: 30px 20px !important;
      }

      .merged-cell .domain-item {
        display: block;
        margin: 10px auto;
      }

      .merged-cell .domain-divider {
        margin: 10px auto;
      }

      /* 概念合并单元格样式 */
      .concept-merged-cell {
        padding: 30px 20px !important;
        vertical-align: middle !important;
      }

      .concept-merged-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
      }

      .concept-merged-content p {
        color: #1976d2;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.4;
        text-align: center;
      }

      .concept-item-merged {
        text-align: center;
        width: 100%;
      }

      .concept-number-text {
        color: #1976d2;
        font-size: 0.9rem;
        font-weight: 700;
        display: block;
        margin-bottom: 8px;
        opacity: 0.8;
      }

      .concept-item-merged p {
        color: #1976d2;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.4;
      }

      .concept-divider-merged {
        width: 80%;
        height: 1px;
        background: linear-gradient(
          to right,
          transparent,
          #1976d2,
          transparent
        );
        opacity: 0.3;
      }

      .domain-item {
        background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
        color: #1976d2;
        padding: 12px 18px;
        border-radius: 25px;
        font-size: 0.95rem;
        font-weight: 600;
        display: inline-block;
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
        border: 2px solid rgba(25, 118, 210, 0.1);
        transition: all 0.3s ease;
      }

      .domain-divider {
        width: 80%;
        height: 2px;
        background: linear-gradient(
          to right,
          transparent,
          #1976d2,
          transparent
        );
        margin: 10px 0;
        opacity: 0.3;
      }

      /* 表格悬停效果 */
      .concept-table tbody tr {
        transition: all 0.3s ease;
      }

      .concept-table tbody tr:hover {
        background: linear-gradient(135deg, #f8f9ff, #fff) !important;
      }

      .concept-table tbody tr:hover .domain-item {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(25, 118, 210, 0.3);
      }

      /* 跨学科目标表格样式 */
      .objectives-table-container {
        margin-top: 30px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        background: white;
      }

      .objectives-table {
        width: 100%;
        border-collapse: collapse;
        font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      }

      .objectives-table thead th {
        padding: 25px 30px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
      }

      .heritage-dimension-header {
        background: linear-gradient(135deg, #d32f2f, #b71c1c);
        color: white;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }

      .science-dimension-header {
        background: linear-gradient(135deg, #1976d2, #004ba0);
        color: white;
      }

      .objectives-table tbody td {
        padding: 30px;
        border-bottom: 1px solid #e0e0e0;
        vertical-align: middle;
      }

      .objectives-table tbody tr:last-child td {
        border-bottom: none;
      }

      .heritage-dimension-content {
        background: linear-gradient(135deg, #fdf2f2, #fce4ec);
        border-right: 1px solid #e0e0e0;
        width: 50%;
      }

      .science-dimension-content {
        background: linear-gradient(135deg, #f8f9ff, #e3f2fd);
        width: 50%;
      }

      .heritage-dimension-content p,
      .science-dimension-content p {
        color: #333;
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
        text-align: justify;
      }

      /* 表格悬停效果 */
      .objectives-table tbody tr {
        transition: all 0.3s ease;
      }

      .objectives-table tbody tr:hover {
        background: linear-gradient(135deg, #fff9f9, #f0f8ff) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .objectives-table tbody tr:hover .heritage-dimension-content {
        background: linear-gradient(135deg, #fef6f6, #ffebee) !important;
      }

      .objectives-table tbody tr:hover .science-dimension-content {
        background: linear-gradient(135deg, #fafbff, #e8f4fd) !important;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .longzhou-hero h1 {
          font-size: 2rem;
        }

        .heritage-science-content {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .science-text {
          padding: 30px 20px;
        }

        .science-text h2 {
          font-size: 1.8rem;
        }

        .section-title {
          font-size: 1.6rem;
          flex-direction: column;
          gap: 10px;
        }

        .section-title i {
          width: 40px;
          height: 40px;
          font-size: 1.2rem;
        }

        .concept-table-container {
          border-radius: 15px;
          overflow-x: auto;
        }

        .concept-table {
          min-width: 800px;
        }

        .concept-table thead th {
          padding: 20px 15px;
          font-size: 1rem;
        }

        .concept-table tbody td {
          padding: 20px 15px;
        }

        .heritage-content p {
          font-size: 0.9rem;
        }

        .concept-number {
          font-size: 1rem;
          padding: 8px;
        }

        .concept-text-cell p {
          font-size: 1rem;
          padding: 8px;
        }

        .domain-item {
          padding: 10px 15px;
          font-size: 0.9rem;
        }

        .merged-cell {
          padding: 30px 15px !important;
          gap: 15px;
        }

        .domain-divider {
          margin: 8px 0;
        }

        .concept-merged-cell {
          padding: 20px 15px !important;
        }

        .concept-merged-content {
          gap: 15px;
        }

        .concept-number-text {
          font-size: 0.8rem;
          margin-bottom: 6px;
        }

        .concept-item-merged p {
          font-size: 1rem;
        }

        .objectives-table-container {
          border-radius: 10px;
          overflow-x: auto;
        }

        .objectives-table {
          min-width: 600px;
        }

        .objectives-table thead th {
          padding: 20px 15px;
          font-size: 1rem;
        }

        .objectives-table tbody td {
          padding: 20px 15px;
        }

        .heritage-dimension-content p,
        .science-dimension-content p {
          font-size: 1rem;
        }
      }
    </style>
  </head>
  <body class="theme-explore">
    <!-- 导航栏组件容器 -->
    <div id="navbar-container"></div>

    <!-- 英雄区块 -->
    <section class="longzhou-hero">
      <div class="container">
        <div class="breadcrumb">
          <a href="index.html">首页</a>
          <i class="fas fa-chevron-right"></i>
          <a href="about.html">认识非遗</a>
          <i class="fas fa-chevron-right"></i>
          <span>龙舟</span>
        </div>
        <h1>龙舟</h1>
        <p>千年传承的造船智慧，融合流体力学的水上艺术</p>
      </div>
    </section>

    <!-- 非遗科普模块 -->
    <section class="heritage-science-section">
      <div class="container">
        <div class="heritage-science-content">
          <!-- 左侧介绍文字 -->
          <div class="science-text">
            <h2>龙舟制作技艺</h2>

            <div class="heritage-info">
              <p>
                <strong>级别：</strong>
                国家级
              </p>
              <p>
                <strong>国家级公布时间：</strong>
                2008年（第二批）
              </p>
              <p>
                <strong>省级公布时间：</strong>
                2007年（第二批）
              </p>
              <p>
                <strong>申报地区或单位：</strong>
                东莞市中堂镇
              </p>
              <p>
                <strong>保护单位：</strong>
                东莞市中堂镇文化服务中心（东莞市中堂镇体育管理服务中心）
              </p>
            </div>

            <h3>项目简介</h3>
            <p>
              龙舟制作技艺，是第二批国家级非物质文化遗产代表性项目名录传统技艺类项目。地处珠江三角洲水乡的东莞市中堂镇，龙舟竞渡习俗历史悠久，盛况绵延，曾被中国龙舟协会命名为"中国龙舟之乡"，当地龙舟制作始于清代康乾盛世。
            </p>

            <h3>造型特点</h3>
            <p>
              中堂制作的龙舟有大头龙舟和鸡公头龙舟两大类，以大头龙舟为主，也最具代表性。其造型特点是船身狭长，两头翘起，线条优美，潇洒流畅，尤其龙头硕大，高高跷起，气宇轩昂，显威武雄壮之姿，有赛龙夺锦之势，故称大头龙舟。
            </p>

            <h3>制作工艺</h3>
            <p>
              主体结构分龙头、龙尾、龙骨、隆肠、冚板5个部分，制作流程有15个步骤：
            </p>
            <ul>
              <li>选底骨（龙骨）</li>
              <li>起底（钉、起蝴蝶底）</li>
              <li>起水（拗弯龙骨，使呈流线型）</li>
              <li>打水平（中线定位，平衡蝴蝶底）</li>
              <li>转水（安装挡水板）</li>
              <li>做大旁（合舟两侧，也称钉花旁）</li>
              <li>做横挡（舟排骨）</li>
              <li>做坐板（划手坐位）</li>
              <li>安龙肠</li>
              <li>加固中肠（用竹片加固坐位于龙肠，也称抓篾）</li>
              <li>上桐油灰（填充船板之间的缝隙以防漏水）</li>
              <li>刨光</li>
              <li>涂清漆（扫柚油使舟光滑）</li>
              <li>制作安装龙头</li>
              <li>安装尾舵</li>
            </ul>
            <p>
              整个过程约需时6至7天。龙舟早期以格木制作，因造成船体重，舟行阻力大，曾改用松木，近年又再改用杉木，重量轻，吃水浅，舟速快。
            </p>

            <h3>传承价值</h3>
            <p>
              中堂镇的龙舟制作技艺精细，自成一家，所制龙舟风格独特，极富象征意义，深受珠三角水乡乃至西江、北江流域民间的喜爱。
            </p>
          </div>

          <!-- 右侧图片 -->
          <div class="science-images">
            <div class="science-image">
              <img src="img/龙舟.jpg" alt="传统龙舟" />
              <div class="image-caption">传统工艺制作的精美龙舟</div>
            </div>
            <div class="science-image">
              <img
                src="img/龙舟结构图/绘制龙舟结构图 (9).png"
                alt="龙舟结构图"
              />
              <div class="image-caption">龙舟结构设计图解</div>
            </div>
            <div class="science-image">
              <img
                src="img/龙舟结构图/绘制龙舟结构图 (10).png"
                alt="龙舟制作工艺"
              />
              <div class="image-caption">龙舟制作工艺流程</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 非遗+科学课堂模块 -->
    <section class="science-classroom-section">
      <div class="container">
        <div class="classroom-content">
          <div class="classroom-header">
            <h2>非遗+科学课堂</h2>
            <p>深入探索龙舟制作中蕴含的科学原理，揭秘古代工匠的智慧结晶</p>
          </div>

          <!-- 学科核心概念模块 -->
          <div class="core-concepts-section">
            <h3 class="section-title">
              <i class="fas fa-graduation-cap"></i>
              学科核心概念
            </h3>

            <div class="concept-table-container">
              <table class="concept-table">
                <thead>
                  <tr>
                    <th class="heritage-header">非遗特点</th>
                    <th class="concept-header" colspan="2">学科核心概念</th>
                    <th class="domain-header">领域</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="heritage-content">
                      <p>
                        龙舟因珠江三角洲水乡龙舟竞渡习俗历史悠久，其制作工艺从格木到杉木不断改进，15道工序精制船身更适合竞速。除竞渡外，龙舟年造迄今保持传统技艺，既承载工艺优化提升运输效率，既承载亲民俗文化，又服务于当地生产生活，成为兼具文化与实用价值的载体。
                      </p>
                    </td>
                    <td class="concept-number-cell">
                      <div class="concept-number">
                        12.2 技术与工程改变了人们的生产和生活
                      </div>
                    </td>
                    <td class="concept-text-cell">
                      <p>12. 技术、工程与社会</p>
                    </td>
                    <td class="domain-content merged-cell" rowspan="3">
                      <div class="domain-item">工程与技术领域</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="heritage-content">
                      <p>
                        龙舟制作技艺充分展现设计在工程中的核心地位。造型上，流线型船身与轻质木结合，降低水阻速度，龙头设计兼具象征与实用功能；结构设计中，龙骨选材、打水平等工序确保船体承重与平衡；流程设计上，15道工序环环相扣，从选材至安装尾舵的系统性规划，既提升效率又保障质量，这些从功能、性能到制作流程的设计，全方位决定了龙舟工程的成败。
                      </p>
                    </td>
                    <td class="concept-number-cell">
                      <div class="concept-number">13.2 工程的关键是设计</div>
                    </td>
                    <td
                      class="concept-text-cell concept-merged-cell"
                      rowspan="2"
                    >
                      <div class="concept-merged-content">
                        <p>13. 工程设计与物化</p>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="heritage-content">
                      <p>
                        龙舟制作技艺通过将选底骨、起底等15个步骤的设计方案，按龙头、龙尾等主体结构要求，选用杉木等材料，经刨光、涂漆等操作物化为具有狭长船身、硕大龙头等造型的龙舟，体现了工程是设计方案物化的结果。
                      </p>
                    </td>
                    <td class="concept-number-cell">
                      <div class="concept-number">
                        13.3 工程是设计方案物化的结果
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 跨学科目标模块 -->
          <div class="interdisciplinary-section">
            <h3 class="section-title">
              <i class="fas fa-project-diagram"></i>
              跨学科目标
            </h3>

            <div class="objectives-table-container">
              <table class="objectives-table">
                <thead>
                  <tr>
                    <th class="heritage-dimension-header">非遗维度</th>
                    <th class="science-dimension-header">科学维度</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="heritage-dimension-content">
                      <p>理解龙舟文化的仪式性与历史价值</p>
                    </td>
                    <td class="science-dimension-content">
                      <p>掌握流体力学基本原理（阻力、浮力、伯努利效应）</p>
                    </td>
                  </tr>
                  <tr>
                    <td class="heritage-dimension-content">
                      <p>
                        识别传统龙舟的造型与结构特征（如榫卯接合、龙舟设计）
                      </p>
                    </td>
                    <td class="science-dimension-content">
                      <p>建立力学模型分析船体稳定性与速度关系</p>
                    </td>
                  </tr>
                  <tr>
                    <td class="heritage-dimension-content">
                      <p>体验传统龙舟制作工具（如木刨、榫凿）</p>
                    </td>
                    <td class="science-dimension-content">
                      <p>实践工程设计迭代优化流程</p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页面底部 -->
    <footer class="main-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h4>关于我们</h4>
            <p>致力于保护和传承中华民族非物质文化遗产</p>
          </div>
          <div class="footer-section">
            <h4>快速链接</h4>
            <ul>
              <li><a href="about.html">认识非遗</a></li>
              <li><a href="explore.html">走近非遗</a></li>
              <li><a href="heritage.html">传习非遗</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>联系我们</h4>
            <p>邮箱: info@heritage.cn</p>
            <p>电话: 010-12345678</p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2024 中华非遗. 保留所有权利.</p>
        </div>
      </div>
    </footer>

        <!-- AI对话按钮 -->
    <button class="ai-chat-button" id="aiChatButton" title="AI助手">
        <i class="fas fa-robot"></i>
    </button>

    <!-- AI对话弹窗 -->
    <div class="ai-chat-modal" id="aiChatModal">
        <div class="ai-chat-window">
            <!-- 对话窗口头部 -->
            <div class="ai-chat-header">
                <div class="ai-chat-title">
                    <i class="fas fa-robot"></i>
                    <span>非遗索思AI助手</span>
                </div>
                <button class="ai-chat-close" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 对话消息区域 -->
            <div class="ai-chat-messages">
                <!-- 消息将通过JavaScript动态添加 -->
            </div>

            <!-- 输入区域 -->
            <div class="ai-chat-input-area">
                <textarea 
                    class="ai-chat-input" 
                    id="chatInput" 
                    placeholder="请输入您想了解的非遗问题..."
                    rows="1"
                ></textarea>
                <button class="ai-chat-send" id="chatSend" title="发送">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/ai-chat-final.js"></script>
    <script src="scripts/navbar-component.js"></script>
    <script>
        // 初始化导航栏并设置当前页面
        initNavbar();
        setActiveNavPage('longzhou.html');
    </script>
</body>
</html>
